<!--抵押金额告警  -->
<template>
	<border cardTitle="抵押金额告警">
		<div class="table" v-if="!isNull">
			<div class="tableBar">
				<div class="item"></div>
				<div class="item">牧场名称</div>
				<div class="item">抵押金额(万元)</div>
				<div class="item">用信金额(万元)</div>
			</div>
			<div class="tableContent flex-1">
				<vueSeamlessScroll :data="tableList" v-if="isloading" ref="scroll" :class-option="optionSingleHeight" class="body">
					<div class="list" v-for="(item, index) in tableList" :key="index" :style="{ background: index % 2 == 0 ? '' : '#08183d' }">
						<div class="item">{{ index + 1 }}</div>
						<div class="item">{{ item.deptName }}</div>
						<div class="item" style="color: #fc7a4e">{{ priceFormat(item.pledgeCost, 2) }}</div>
						<div class="item">{{ priceFormat(item.useCost, 2) }}</div>
					</div>
				</vueSeamlessScroll>
			</div>
		</div>
		<div v-else style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
			<img src="/img/dashboard/nullPng.png" alt="" />
		</div>
	</border>
</template>

<script>
import border from '../../border.vue';
import StatisticsMixins from '../../../StatisticsMixins';
let color = ['#2467ED', '#16E4CF', '#EBA62C'];
import { bigScreenApi } from '@/api/index';
import { priceFormat } from '@/utils/base';
import vueSeamlessScroll from 'vue-seamless-scroll';

export default {
	components: { border, vueSeamlessScroll },
	mixins: [StatisticsMixins],
	data() {
		return {
			tableList: [],
			isloading: false,
			isNull: true
		};
	},
	computed: {
		// 滚动动画
		optionSingleHeight() {
			return {
				singleHeight: 37,
				waitTime: 2000,
				step: 1,

				direction: 1,
				limitMoveNum: 3,
				openWatch: true
			};
		}
	},
	props: {
		level: {
			type: [String, Number],
			default: 0
		},
		areaList: {
			type: [Array],
			default: () => []
		},
		cityId: {
			type: [String, Number],
			default: ''
		}
	},
	watch: {
		level: {
			handler(newV, oldV) {
				this.getInfo();
			},
			immediate: true
		}
	},

	methods: {
		getInfo() {
			this.isloading = false;
			this.$postAction(bigScreenApi.findPledgeWarn, {
				xzqhbm: this.level > 1 ? this.cityId : '',
				level: this.level
			}).then(res => {
				if (res && res.code == 1) {
					let list = res.data;

					this.tableList = [...list];
					this.isloading = true;
					this.isNull = this.tableList.length == 0 ? true : false;
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
.table {
	// padding-top: 0.2rem !important;
	padding-bottom: 0 !important;
	//   width: 100%;
	height: 100%;
	padding: 0.1rem 0.17rem;
	//   background: red;
	display: flex;
	flex-direction: column;
	.tableBar {
		width: 100%;
		height: 0.37rem;
		display: flex;
		background: #12275a;
		.item {
			width: 30%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 0.14rem;
			// font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #2467ed;
			&:first-child {
				width: 10%;
			}
			&:last-child {
				// color: #e94256;
			}
		}
	}
	.tableContent {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// position: relative;
		overflow: hidden;
		.body {
			width: 100%;
			// height: 100%;
			overflow: hidden;
			height: 100%;
			// transition: all 0.5s;
			// position: absolute;
		}
		.list {
			width: 100%;
			height: 0.37rem;
			display: flex;
			.item {
				width: 32%;
				height: 100%;
				// display: flex;
				// align-items: center;
				// justify-content: center;
				font-size: 0.14rem;
				// font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				box-sizing: border-box;
				padding: 0 0.05rem;
				text-align: center;
				line-height: 0.37rem;
				&:first-child {
					width: 10%;
				}
			}
		}
	}
}
</style>
